<template>
  <div class="property_repair">
    <van-nav-bar
      title="物业报修"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="repair_info">
      <van-field
        v-model="form.address"
        label="维修地址"
        placeholder="请选择绑定的房屋"
        clearable
        readonly
        clickable
        @click="showPicker = true"
        right-icon="arrow"
        required
      />
      <van-field
        v-model="form.repairDate"
        label="上门时间"
        placeholder="2019-08-29 17:00"
        clearable
        readonly
        clickable
        @click="timePicker = true"
        right-icon="arrow"
        required
      />
      <van-field
        v-model="form.contactName"
        label="联系姓名"
        placeholder="请输入报修人姓名"
        clearable
        maxlength="10"
        class="repair_input_box"
        required
      />
      <van-field
        v-model="form.contactPhone"
        type="number"
        label="联系电话"
        placeholder="请输入报修人电话"
        clearable
        maxlength="15"
        class="repair_input_box"
        required
      />
      <van-field
        v-model="form.repairTypeName"
        label="报修类型"
        placeholder="请选择报修类型"
        clearable
        readonly
        clickable
        right-icon="arrow"
        @click="repairTypePicker = true"
        required
      />
      <div class="textarea_box">
        <textarea
          v-model="form.description"
          placeholder="请详细描述需要报修的内容"
          class="des_input_box"
          :maxlength="maxlength"
        ></textarea>
        <span>{{ currentLength }}/{{ maxlength }}</span>
      </div>
      <div class="image_box">
        <p>添加图片</p>
        <van-uploader
          v-model="form.fileList"
          multiple
          :max-count="6"
          :after-read="afterRead"
          :before-read="beforeRead"
          @delete="deleteImg"
        />
      </div>
      <van-button
        class="next_btn apply_btn"
        @click="submit()"
        :disabled="!disabled"
        >提交</van-button
      >
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model="repairTypePicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="repairTypeList"
        @cancel="repairTypePicker = false"
        @confirm="typeConfirm"
      />
    </van-popup>
    <van-popup v-model="timePicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="timePicker = false"
        @confirm="timeConfirm"
      />
    </van-popup>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import util from "@/utils/util";
import { validatePhoneNum } from "@/utils/validate";
import { notEmpty } from "../emptyTest";
import houseService from "@/controller/myhouse.js";
import smartProperty from "@/controller/smartProperty.js";
import constant from "@/controller/constant.js";
import uploadService from "@/controller/mine.js";
export default {
  name: "propertyRepair",
  data() {
    return {
      neighborhoodId: null,
      form: {
        communityId: "",
        houseId: "",
        neighborhoodId: "",
        address: "",
        repairDate: "",
        contactName: "",
        contactPhone: "",
        repairType: "",
        repairTypeName: "",
        description: "",
        fileList: []
      },
      showLoading: false,
      imageList: [],
      maxlength: 200,
      showPicker: false,
      timePicker: false,
      repairTypePicker: false,
      columns: [],
      repairTypeList: [],
      minHour: 10,
      maxHour: 23,
      minDate: new Date(),
      maxDate: new Date(2049, 12, 31),
      currentDate: new Date()
    };
  },
  mounted() {
    this.userId = JSON.parse(localStorage.getItem("userInfo")).currentUser.id;
    this.neighborhoodId = JSON.parse(localStorage.getItem("userInfo")).shequId;
    this.getBoundHouseList(this.userId);
    this.getRepairTypeList();
  },
  computed: {
    currentLength: function() {
      return this.form.description.length;
    },
    disabled: function() {
      return (
        notEmpty(this.form.address) &&
        notEmpty(this.form.repairDate) &&
        notEmpty(this.form.contactName) &&
        notEmpty(this.form.contactPhone) &&
        notEmpty(this.form.repairType) &&
        this.form.fileList.length > 0
      );
    }
  },
  methods: {
    beforeRead(file) {
      const acceptImgs = ["image/jpeg", "image/png", "image/jpg"];
      if (!acceptImgs.includes(file.type)) {
        this.$toast("请上传JPG或者PNG格式的图片!");
        return false;
      }
      this.showLoading = true;
      return true;
    },
    getRepairTypeList() {
      smartProperty.community_repair_type_get_by_neighborhoodId(this.neighborhoodId).then(res => {
        if (res.code === "0") {
          this.repairTypeList = [];
          res.datas.forEach(e => {
            this.repairTypeList.push({
              value: e.id,
              text: e.title
            });
          });
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    getBoundHouseList(id) {
      houseService.community_user_house_user(id).then(res => {
        if (res.code === "0") {
          if (!res.datas.length) {
            this.$toast("暂无绑定房屋");
            return;
          }
          this.columns = [];
          res.datas.forEach(e => {
            this.columns.push({
              value: {
                neighborhoodId: e.neighborhoodId,
                houseId: e.houseId
              },
              text: e.neighborhoodName + e.houseCode
            });
          });
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    afterRead(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      uploadService
        .upload_image(formData)
        .then(res => {
          if (res.data.code === "0") {
            this.$toast("图片上传成功！");
            this.imageList.push(res.data.datas);
          } else {
            if (res && res.data && res.data.msg) {
              this.$toast(res.data.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
          return true;
        });
    },
    deleteImg(file) {
      this.imageList.splice(
        this.form.fileList.findIndex(item => item.file.name === file.file.name),
        1
      );
    },
    onConfirm(val) {
      this.showPicker = false;
      this.form.address = val.text;
      this.form.neighborhoodId = val.value.neighborhoodId;
      this.form.houseId = val.value.houseId;
    },
    typeConfirm(val) {
      this.repairTypePicker = false;
      this.form.repairTypeName = val.text;
      this.form.repairType = val.value;
    },
    timeConfirm(val) {
      this.timePicker = false;
      this.form.repairDate = util.formatDate.format(val, "yyyy/MM/dd hh:mm:ss");
    },
    submit() {
      if (!validatePhoneNum(this.form.contactPhone)) {
        this.$toast("请输入合法电话号码");
        return;
      }
      const data = {
        communityId: JSON.parse(localStorage.getItem("userInfo")).jiedaoId,
        contactName: this.form.contactName,
        contactPhone: this.form.contactPhone,
        description: this.form.description,
        houseId: this.form.houseId,
        neighborhoodId: this.form.neighborhoodId,
        repairType: this.form.repairType,
        repairDate: this.form.repairDate,
        images: this.imageList.toString()
      };
      smartProperty.community_repair_apply(data).then(res => {
        if (res.code === "0") {
          this.$toast("提交成功");
          this.$router.go(-1);
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/workstation.scss";

.property_repair {
  background: #ffffff;
  height: 100%;

  .image_box {
    padding: 10px 15px;
    width: 100%;

    p {
      margin: 0 0 10.5px 0;
      line-height: 20px;
      font-size: 14px;
      color: #333333;
    }
  }

  .repair_info {
    display: flex;
    flex-wrap: wrap;
  }

  .textarea_box {
    width: 100%;
    position: relative;

    span {
      position: absolute;
      bottom: 25px;
      right: 25px;
      font-size: 12px;
      color: #999999;
    }
  }

  .des_input_box {
    width: 325px;
    height: 130px;
    margin: 10px 15px;
    border-radius: 10px;
    border: none;
    background: #f5f7fa;
    padding: 15px 10px;
    font-size: 12px;
    line-height: 16.5px;
    color: #323233;
  }
}
</style>

<style lang="scss">
.property_repair {
  .van-cell {
    font-size: 14px;
    line-height: 20px;
    padding: 10px 15px;
  }

  .van-cell:first-child {
    padding-top: 15px;
  }

  .van-field__control {
    text-align: right;
    font-size: 14px;
  }

  .repair_input_box {
    .van-field__control {
      margin-right: 24px;
    }
  }

  .image_box {
    .van-uploader__preview-image {
      width: 107px;
      height: 82px;

      .van-image__error,
      .van-image__img,
      .van-image__loading {
        border-radius: 5px;
      }
    }

    .van-uploader__upload {
      width: 107px;
      height: 82px;
      border-radius: 5px;
      border-style: solid;
    }

    .van-uploader__upload-icon {
      font-size: 25px;
    }
  }
}
</style>
